<template>
  <div>
    <h2>物流相关信息</h2>
    <div class="logistics-info-header">
      <div class="logistics-info-header-left">
        <div :class="list[0].classAttr">{{ list[0].cont }}</div>
        <div class="logistics-company">{{ orderInfo.logisticsCompany }}</div>
        <div class="logistics-no">{{orderInfo.logisticsNo}}</div>
      </div>
    </div>
    <ul class="logistics-info-list">
      <li v-for="(item, index) in orderInfo.logisticsInfo" :key="index">
        <div class="logistics-info-list-time">{{ item.time }}</div>
        <div class="logistics-info-list-content">{{ item.content }}</div>
      </li>
    </ul>
    <button v-stateInfo="orderInfo">查看物流详情</button>
  </div>
</template>
<script>
export default {
  // 自定判断物流状态的方法
  directives: {
    stateInfo: {
      inserted(el, binding) {
        el.addEventListener('click', function () {
          if (binding.value.role == 'admin' || binding.value.role == 'zhangsan' || binding.value.role == 'lisi') {
            alert('您有权限查看物流信息')
          } else {
            alert('您没有权限查看物流信息')
          }
        })

      }
    }
  },
  props: ['orderInfo'],
  data() {
    return {
      list:[]
    }
  },
  created() {
    let info = this.orderInfo.logisticsStatus;
    switch (info) {
      case 0:
        this.list.push({ cont: "未发货", classAttr: "blue logistics-status" });
        break;
      case 1:
        this.list.push({ cont: "已发货", classAttr: "undo logistics-status" });
        break;
      case 2:
        this.list.push({ cont: "已签收", classAttr: "error logistics-status" });
        break;
      case 3:
        this.list.push({ cont: "未签收", classAttr: "right logistics-status" });
        break;
      default:
        console.log(12);
    }
  }
}
</script>
<style scoped>
.bule{
  color: blue;
}
.undo{
  color: aquamarine;
}
.error{
  color: red;
}
.right{
  color: green;
}
</style>